<template>
  <div>
    <el-dialog
      :model-value="visible"
      :title="title"
      :width="width"
      :show-close="closeBtn"
      :draggable="draggable"
      :close-on-click-modal="maskBtn"
      @close="emit('closeDialog')"
      style="border-radius: 10px;"
      align-center
    >
      <div class="dialog-body">
        <slot>对话框内容</slot>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-for="b in buttonList" :type="b.type" @click="b.btnEvent" :disabled="b.dis">
            {{ b.name }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  const emit = defineEmits(['closeDialog']);
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false
    },
    maskBtn: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "对话框"
    },
    width: {
      type: Number,
      default: 500,
    },
    closeBtn: {
      type: Boolean,
      default: true
    },
    draggable: {
      type: Boolean,
      default: false
    },
    buttonList: {
      type: Array,
      default: []
    }
  });
</script>

<style scoped>
  .dialog-body{
    overflow: auto;
    max-height: 55vh;
  }
  .dialog-body::-webkit-scrollbar {
    width: 5px;
  }
  .dialog-body::-webkit-scrollbar-button {
    display: none;
  }
  .dialog-body::-webkit-scrollbar-track {
    border-radius: 8px;
    background: #f3f3f3;
  }
  .dialog-body::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: #d1d1d1;
  }
  .dialog-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
</style>